<template>
  <div class="login_main">
    <div class="divright">
      <div class="login">
        <h2><span @click="isPhone=false">膳食系统后台</span></h2>
        <div class="login_box">

          <input type="text" v-model="loginParam.username" required v-show="!isPhone" /><label v-show="!isPhone">用户名</label>
<!--          <input type="text"  v-model="phoneParam.userPhone" required v-show="isPhone"/><label v-show="isPhone">手机号</label>-->
        </div>
        <div class="login_box">
          <input type="password" v-model="loginParam.password" required="required" v-show="!isPhone" /><label v-show="!isPhone">密码</label>
<!--          <input type="text"  style="width: 320px;" required="required" v-model="phoneParam.phoneCode" v-show="isPhone" /><label v-show="isPhone">验证码</label>-->
<!--          <a v-show="isPhone" @click.prevent="sendCode"> 发送</a>-->
        </div>
        <a  style="position: relative;margin-left: -200px" href="javascript:void(0)" @click.prevent="login">
          登录
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </a>
        <a  style="position: relative; margin-top: -47px;margin-left: 180px" href="javascript:void(0)" @click.prevent="login">
          注册
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </a>
<!--        <a v-show="isPhone" href="javascript:void(0)" @click.prevent="phoneLogin">-->
<!--          登录-->
<!--          <span></span>-->
<!--          <span></span>-->
<!--          <span></span>-->
<!--          <span></span>-->
<!--        </a>-->
      </div>
    </div>
  </div>


</template>

<script>
  export default{
    name:"BusinessLogin",
    data(){
      return {
        loginParam:{
          username:"",
          password:""
        },
        isPhone:false,
        phoneParam:{
          userPhone:"",
          phoneCode:""
        }
      }
    },
    methods:{
      login(){
        var param="username="+this.loginParam.username+"&password="+this.loginParam.password;
        this.$http.post("/login",param).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'success'
            });
            localStorage.setItem("userInfo",JSON.stringify(resp.data.data))
            this.$router.push("/main");
          }else{
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'error'
            });
          }
        })
      },
      sendCode(){
        this.$http.get("/user/send/"+this.phoneParam.userPhone);
        this.$message({
          showClose: true,
          message: "发送成功",
          type: 'success'
        });
      },
      phoneLogin(){
        var param="userPhone="+this.phoneParam.userPhone+"&phoneCode="+this.phoneParam.phoneCode;
        this.$http.post("/phoneLogin",param).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'success'
            });
            localStorage.setItem("userInfo",JSON.stringify(resp.data.data))
            this.$router.push("/main");
          }else{
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'error'
            });
          }
        })
      }
    }
  }
</script>

<style>
  @import url("../../static/css/business-login/index.css");
  .login_main{
    /* 弹性布局 让页面元素垂直+水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 让页面始终占浏览器可视区域总高度 */
    height: 100vh;
    /* 背景渐变色 */
    background: linear-gradient(#fff, #999b9e);
  }
</style>
